<template>
  <div>
    <el-card style="margin: 20px 0">
      <div class="header">
        <el-tabs v-model="activeName">
          <el-tab-pane label="销售额" name="sale"></el-tab-pane>
          <el-tab-pane label="访问量" name="visite"></el-tab-pane>
        </el-tabs>
        <!-- 右侧结构 -->
        <div class="dateBox">
          <span @click="today">今日</span>
          <span @click="week">本周</span>
          <span @click="month">本月</span>
          <span @click="year">今年</span>
          <el-date-picker
            v-model="dateValue"
            style="margin-left: 20px"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </div>
      </div>

      <!-- 卡片身体部分 -->
      <el-row :gutter="20">
        <el-col :span="18" :offset="0">
          <v-chart
            :option="getOption()"
            style="height: 400px"
            autoresize
          ></v-chart>
        </el-col>
        <el-col :span="6" :offset="0">
          <h6>门店{{ activeName == "sale" ? "销售额" : "访问量" }}排名</h6>
          <ul v-show="activeName == 'sale'">
            <li v-for="(item, index) in arr" :key="index">
              <span :class="{ active: index < 3 }">{{ item.no }}</span>
              <span>{{ item.name }}</span>
              <span>{{ item.count }}</span>
            </li>
          </ul>
          <ul v-show="activeName != 'sale'">
            <li v-for="(item, index) in arr1" :key="index">
              <span :class="{ active: index < 3 }">{{ item.no }}</span>
              <span>{{ item.name }}</span>
              <span>{{ item.count }}</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import moment from "moment";

//接受父组件传递过来销售额与访问量数据
const props = defineProps(["saleArr", "visiteArr", "x", "arr", "arr1"]);
const activeName = ref("sale"); // 标签页
const dateValue = ref([]); // 开始和结束日期

// 左侧柱状图配置项
const getOption = () => {
  return {
    //标题
    title: {
      text: activeName.value == "sale" ? "销售额" : "访问量",
    },
    //提示组件
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "0",
      right: "0",
      bottom: "0",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: props.x,
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        //y轴线展示
        axisLine: {
          show: true,
        },
        //y轴的刻度

        axisTick: {
          show: true,
        },
      },
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: "60%",
        data: activeName.value == "sale" ? props.saleArr : props.visiteArr,
        //柱条的颜色调试
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        //展示数值
        label: {
          show: true,
          //文本位置
          position: "top",
          //旋转
          rotate: 20,
          color: "yellowgreen",
        },
      },
    ],
  };
};

// 获取当前日期
const today = () => {
  const start = moment().format("YYYY-MM-DD");
  const end = moment().format("YYYY-MM-DD");
  dateValue.value = [start, end];
};

// 获取本周日期
const week = () => {
  const start = moment().weekday(1).format("YYYY-MM-DD");
  const end = moment().weekday(7).format("YYYY-MM-DD");
  dateValue.value = [start, end];
};

// 获取本月日期
const month = () => {
  const start = moment().startOf("month").format("YYYY-MM-DD");
  const end = moment().endOf("month").format("YYYY-MM-DD");
  dateValue.value = [start, end];
};

// 获取本年日期
const year = () => {
  const start = moment().startOf("year").format("YYYY-MM-DD");
  const end = moment().endOf("year").format("YYYY-MM-DD");
  dateValue.value = [start, end];
};
</script>

<style scoped>
.header {
  position: relative;
}
.dateBox {
  position: absolute;
  right: 0;
  top: 0;
}
.dateBox span {
  margin: 0 5px;
}

ul {
  list-style: none;
}

/**今晚把flex布局看看**/
li {
  font-size: 12px;
  margin-top: 30px;
  display: flex;
  /**水平轴对齐方式**/
  justify-content: space-between;
}
li span:nth-child(1) {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
li span.active {
  border-radius: 50%;
  background: black;
  color: white;
}
</style>
